<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人主页</title>
    <link rel="stylesheet" href="swiper-4.5.0/dist/css/swiper.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Swiper -->
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div class="header" id="demo">
                <div class="topcn" style="font:20px/18px 'microsoft yahei'; color:#0FF;text-align:center;">
                    <div class="head"><img src="img/head.jpg" alt=""></div>
                    <h1 class="homepage">个人主页</h1>
                    <p class="motto">人生中没有一帆风顺，只要你肯努力，拼搏，才能到达成功的彼岸。</p>
                </div>
                <div class="nav">
                    <a class="gv" href="#demo">首页</a>
                    <a class="gv" href="#about">关于我</a>
                    <a class="gv" href="#skills">专业技能</a>
                    <a class="gv" href="#works">作品案例</a>
                    <a class="gv" href="#contact">联系我</a>
                </div>
                <div class="canvaszz"> </div>
                <canvas id="canvas"></canvas>
            </div>
        </div>
        <div class="swiper-slide sub-page" id="about">
            <div class="about">
                <div class="container">
                    <div class="title">
                        <h2>关于我</h2>
                        <p>- ABOUT ME -</p>
                    </div>
                    <div class="about-cont">
                        <div class="about-img">
                            <img src="img/bj.png" alt="">
                        </div>
                        <div class="about-text">
                            <ul>
                                <li>姓名：石晓晶</li>
                                <li>年龄：18岁</li>
                                <li>学历：大专</li>
                                <li>求职方向：前端专业</li>
                            </ul>
                            <ul>
                                <li>电话：150-0330-7471</li>
                                <li>邮箱：2799116550@qq.com</li>
                                <li>籍贯：河北省邯郸市</li>
                                <li>毕业学院：泊头职业学院</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="swiper-slide sub-page" id="skills">
            <div class="skills">
                <div class="title">
                    <h2>专业技能</h2>
                    <p>- Professional skills -</p>
                </div>
                <div class="skills-cont">
                    <div class="container">
                        <div class="progress html">
                            <span class="progress-title">HTML</span>
                            <div class="filled" style="width: 85%;">深刻理解web标准，熟悉html5新标签语意，能合理利用语意标签布局页面；</div>
                            <p class="percent">95%</p>
                        </div>
                        <div class="progress css">
                            <span class="progress-title">CSS</span>
                            <div class="filled" style="width: 80%;">熟悉css3新特性属性及相关用法，有一定开发经验；了解css预编译语言less/sass；
                            </div>
                            <p class="percent">90%</p>
                        </div>
                        <div class="progress javascript">
                            <span class="progress-title">Javascript</span>
                            <div class="filled" style="width: 60%;">熟悉JavaScript编程语言</div>
                            <p class="percent">70%</p>
                        </div>
                        <div class="progress jquery">
                            <span class="progress-title">Jquery</span>
                            <div class="filled" style="width: 52%;">熟悉Jquery编程语言</div>
                            <p class="percent">62%</p>
                        </div>
                        <div class="progress bootstrap">
                            <span class="progress-title">Bootstrap</span>
                            <div class="filled" style="width: 75%;">熟练使用Swiper框架开发页面动画效果，有一定开发经验；</div>
                            <p class="percent">85%</p>
                        </div>
                        <div class="progress vue">
                            <span class="progress-title">Vue.js</span>
                            <div class="filled" style="width: 50%;">正在学习(暂无开发经验)</div>
                            <p class="percent">60%</p>
                        </div>
                        <div class="progress ajax">
                            <span class="progress-title">Ajax</span>
                            <div class="filled" style="width: 63%;">熟悉Ajax、DOM等前端技术，熟练应用ajax技术与后端数据进行交互处理；</div>
                            <p class="percent">73%</p>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="swiper-slide sub-page" id="works">
            <div class="works">
                <div class="title">
                    <h2>作品展示</h2>
                    <p>- Works display -</p>
                </div>
                <div class="container">
                    <div class="works-cont">
                        <a href="http://sxj1114.gitee.io/meitu">
                            <p>美图官方网站</p>
                            <img src="img/task.png" alt="">
                        </a>
                        <a href="http://sxj1114.gitee.io/ysl">
                            <p>圣罗兰官方网站</p>
                            <img src="img/task1.png" alt="">
                        </a>
                        <a href="http://sxj1114.gitee.io/repute-page">
                            <p>repute网页</p>
                            <img src="img/task2.png" alt="">
                        </a>
                        <a href="http://sxj1114.gitee.io/tiandao-web">
                            <p>天涯明月刀网页</p>
                            <img src="img/task3.png" alt="">
                        </a>
                        <a href="http://sxj1114.gitee.io/yunba_page">
                            <p>云巴网页</p>
                            <img src="img/task4.png" alt="">
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="swiper-slide sub-page" id="contact">
            <div class="contact-me">
                <div class="title">
                    <h2>联系我</h2>
                    <p>- Contact me -</p>
                </div>
                <div class="container">
                    <div class="contact-me-cont">
                        <p class="title">灵感 代码 梦想 未来</p>
                        <div class="translate">
                            <span>INSPIRATION</span>
                            <span>CODE</span>
                            <span>DREAM</span>
                            <span>FUTURE</span>
                        </div>
                        <div class="contact-info">
                            <p>互联网是个奇妙的行业</p>
                            <p>身为前端工程师，更贴近用户，这种体验非常美妙</p>
                            <p>我热爱互联网，更热爱互联网前端技术</p>
                            <p>三人行，必有我师</p>
                            <p>让我们在互联网的浪潮里一起不断成长！</p>
                            <p>手 机：150-0330-7471</p>
                            <p>Q Q：2799116550</p>
                        </div>
                    </div>
                </div>
                <p class="footer">Copyright © 2015 - 2026 2799116550@qq.com 所有 </p>
            </div>
        </div>
    </div>
    <!-- Add Pagination -->
    <!--<div class="swiper-pagination"></div>-->
</div>
<!--在线咨询和回到顶部-->
<div class="black_box">
    <div class="totop" id="totop" href="#demo">
        <a href="">
            <span>TOP</span>
        </a>
    </div>
</div>
<!-- Swiper JS -->
<script src="swiper-4.5.0/dist/js/swiper.min.js"></script>
<script src="js/script.js"></script>
<!-- Initialize Swiper -->

</body>
</html>